﻿<%@ Page Title="" Language="C#" MasterPageFile="~/SiteDesign.master" AutoEventWireup="true" CodeFile="CommonTextboxExtenders.aspx.cs" Inherits="AJAXDemos_CommonTextboxExtenders" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <title>Common AJAX-Extenders for the Textbox Control</title>
    <style type="text/css">
    .Watermark {
        background-image: url('../images/overlay.gif');
        background-repeat: no-repeat;
        padding-left: 20px;
        vertical-align: middle;
        color: DarkGray;
    }
    /* Styles below borrowed from 
    http://programming.top54u.com/post/CSS-Example-for-AJAX-Password-strength-as-text.aspx
     */ 
    .textIndicator_poor, 
    .textIndicator_weak,
    .textIndicator_good,
    .textIndicator_strong,
    .textIndicator_excellent {
    display:block;
    padding:2px;
    font-weight:bold;
    }

    .textIndicator_poor { 
    background-color:gray;
    color:#ffff00;
    }
     
    .textIndicator_weak { 
    background-color:gray;
    color:#00ffff;
    }
     
    .textIndicator_good { 
    background-color:gray;
    color:lightblue;
    }
     
    .textIndicator_strong { 
    background-color:gray;
    color:lightgreen;
    }
     
    .textIndicator_excellent { 
    background-color:gray;
    color:#00ffdd;
    }


    .textbox {
    border: solid 2px #cccccc;
    border-top: solid 2px #a0a0a0;
    }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AboutDemoContent" Runat="Server">
    <h2>AJAX Extenders for the Textbox</h2>
    <div>In this page, I demonstrate a number of the AJAX extenders commonly used for the Textbox control</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="DemoContent" Runat="Server">
    <div>
        <h2>Live Samples</h2>
        <p>Enter a date: &nbsp;
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> &nbsp;(CalendarExtender)
        <asp:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox1" Format="D">
        </asp:CalendarExtender></p>
        <p>Enter a password:
            <asp:TextBox ID="TextBox4" runat="server" CssClass="textbox"></asp:TextBox>
            <asp:PasswordStrength ID="TextBox4_PasswordStrength" runat="server" 
                Enabled="True" TargetControlID="TextBox4" 
                RequiresUpperAndLowerCaseCharacters="True" MinimumSymbolCharacters="1" MinimumUpperCaseCharacters="1" PreferredPasswordLength="10" CalculationWeightings="25;25;15;35" TextStrengthDescriptions="Poor; Weak; Good; Strong; Excellent" TextStrengthDescriptionStyles="textIndicator_poor; textIndicator_weak; textIndicator_good; textIndicator_strong; textIndicator_excellent" HelpStatusLabelID="Label1">
            </asp:PasswordStrength><br /><asp:Label ID="Label1" runat="server"></asp:Label></p>
        <p>Watermark:
            <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
            <asp:TextBoxWatermarkExtender ID="TextBox5_TextBoxWatermarkExtender" 
                runat="server" Enabled="True" TargetControlID="TextBox5" 
                WatermarkCssClass="Watermark" WatermarkText="First Name">
            </asp:TextBoxWatermarkExtender>
&nbsp;(TextBoxWatermark)</p>
        <p>Numbers only: &nbsp;<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
            <asp:FilteredTextBoxExtender ID="TextBox2_FilteredTextBoxExtender" 
                runat="server" Enabled="True" FilterType="Numbers" TargetControlID="TextBox2">
            </asp:FilteredTextBoxExtender>
            &nbsp;(FilteredTextBoxExtender)</p>
        <p>Money only: &nbsp;<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
            <asp:MaskedEditExtender ID="TextBox3_MaskedEditExtender" runat="server" 
                CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder="" 
                CultureDateFormat="" CultureDatePlaceholder="" CultureDecimalPlaceholder="" 
                CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True" 
                Mask="\$ 9,999,999.99" TargetControlID="TextBox3">
            </asp:MaskedEditExtender>
            &nbsp;(MaskedEditExtender)</p>
        <hr />
        <h2>How to Use</h2>
        <p>There are a number of extenders that work with the TextBox control. They can be used individually, or together.</p>
        <ul>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Calendar/Calendar.aspx">
                Calendar</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/PasswordStrength/PasswordStrength.aspx">
                PasswordStrength</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx">
                TextBoxWatermark</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/FilteredTextBox/FilteredTextBox.aspx">
                FilteredTextBox</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/MaskedEdit/MaskedEdit.aspx">
                MaskedEdit</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AutoComplete/AutoComplete.aspx">
                AutoComplete</a></li>
            <li><a href="http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ColorPicker/ColorPicker.aspx">
                ColorPicker</a></li>
        </ul>
    </div>
</asp:Content>

